<template>
	<view>
		<view v-if="loadstatus===0" class="">
			<view class="container">
				<view class="box_title zl-flex" style="margin-top: 0;">
					<view class="sort">
						<text class="zl_font_number zl-font-24 zl-color-white">1</text>
					</view>
					<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">选择内容主题</text>
				</view>
				<view class="form_box">
					<view class="form_item zl-flex zl-row-between">
						<view class="form_item_left">
							<text class="zl-font-28 zl-font-bold  zl-one-yichu">内容主题</text>
						</view>
						<view class="form_item_right zl-flex zl-row-right">
							<!-- <text v-if="form.digitalModelId>0" class="zl-font-28 zl-font-500 zl-color-EB5E00 zl-one-yichu">
								已完成设置 </text>
							<text class="zl-font-28 zl-font-500 zl-color-EB5E00" v-else> 去选择 </text> -->
							<picker mode="selector" @change="bindPickerChange" :value="index" :range="typeList"
								range-key="name">
								<view class="uni-input">{{typeList[index].name||'请选择'}}</view>
							</picker>
							<image class="right_icon zl-m-l-10" src="/static/icon/to_right_orange.png"></image>
						</view>
					</view>
				</view>
				<view class="box_title zl-flex" style="margin-top: 50rpx">
					<view class="sort">
						<text class="zl_font_number zl-font-24 zl-color-white">2</text>
					</view>
					<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">填写关键词</text>
				</view>
				<view class="box" v-for="(item,index) in list" :key="index">
					<view class="box_item zl-m-b-20">
						<view class="zl-m-b-20">
							<text class="zl-font-28" style="color: #E53F3A;">*</text>
							<text>{{item.key}}</text>
						</view>
						<view v-if="item.inputType!=2" class="cell-box zl-flex zl-row-between" style="background: #fff;border-radius: 8rpx;">
							<input :cursor-spacing="160" :adjust-position="true" v-model="item.value"
								:type="inputType[item.inputType]"
								:style="{'width':item.unit?'90%':'100%','height':'70rpx'}"
								:auto-height="true" placeholder-style="font-size:28rpx"
								:placeholder="item.placeholder" />
							<text class="zl-m-r-20">{{item.unit}}</text>
						</view>
						<view v-else class="textarea-box zl-flex zl-row-between" style="background: #fff;border-radius: 8rpx;">
							<textarea style="height: 200rpx;"  placeholder-style="font-size:28rpx" :placeholder="item.placeholder" :cursor-spacing="160" :adjust-position="true" v-model="item.value"></textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="footer zl-flex zl-row-center ">
				<view class="btn zl-theme-btn" @click="create()"> 生成脚本 </view>
			</view>
		</view>
		<view v-if="loadstatus===1" class="loading-box zl-flex-col zl-col-center zl-row-center">
			<image style="width: 360rpx;" src="/static/icon/loading.gif" mode="widthFix"></image>
			<text style="margin-top: -80rpx;" class="zl-font-28 zl-color-333">正在创作文案，请勿离开...</text>
		</view>
		<view v-if="loadstatus===2" class="">
			<view class="container">
				<view class="answer-box">
					<view class="">
						{{answer}}
					</view>
					<view class="tips"> 内容由AI生成 </view>
				</view>
			</view>
			<view class="footer zl-flex zl-row-center">
				<view v-if="from==='video'" style="width: 330rpx;" class="btn zl-theme-btn zl-m-r-30" @click="useIt()"> 使用该文案 </view>
				<view v-else style="width: 330rpx;" class="btn  zl-theme-btn zl-m-r-30" @click="copy()"> 复制内容 </view>
				<view style="width: 330rpx;" class="btn zl-theme-btn" @click="reply()"> 重写 </view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				inputType: ['','text', '', 'number', 'digit'],
				typeList: [{
					type: 1,
					"name": "假数据1"
				}, {
					type: 2,
					"name": "假数据2"
				}],
				index: 0,
				list:[],
				// list: [{
				// 	"id": 1,
				// 	"key": "姓名",
				// 	"inputType": 1,
				// 	"placeholder": "请输入姓名",
				// 	"unit": ""
				// }, {
				// 	"id": 2,
				// 	"key": "性别",
				// 	"inputType": 1,
				// 	"placeholder": "请输入性别",
				// 	"unit": ""
				// }],
				templateID: 0,
				templateContent: '我叫【姓名】,性别【性别】,帮我写一个20字的自我介绍',
				sparkResult: '',
				loadstatus: 0, //0填写页面,1加载中,2加载完成
				sessionId: 0,
				answer: '',
				from: ''
			};
		},
		onLoad(opt) {
			this.from = opt.from
			this.gettemplatetype()
		},
		methods: {
			gettemplatetype() {
				this.api.aichat.gettemplatetype(this.form).then(res => {
					if (res.code === 0) {
						this.typeList = res.data;
						this.gettemplate(this.typeList[this.index].type)
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			bindPickerChange(e) {
				this.index = parseInt(e.detail.value);
			
				this.gettemplate(this.typeList[this.index].type)
			},
			replacePlaceholders() {
				let replacedContent = this.templateContent;
				this.list.forEach((item) => {
					// console.log(item);
					const key = `【${item.key}】`;
					replacedContent = replacedContent.replace(new RegExp(key, 'g'), item.value);
				});
				return replacedContent;
			},
			gettemplate(type) {
				this.api.aichat.gettemplate(
				{
					type:type
				}).then(res => {
					if (res.code === 0) {
						this.templateID = res.data.templateId;
						this.templateContent = res.data.content;
						this.list = res.data.options
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			create() {
				this.sparkResult = this.replacePlaceholders();
				console.log(this.sparkResult);
				var reg = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/;
				for (let i = 0; i < this.list.length; i++) {
					var item = this.list[i];
					if (!item.value) {
						this.$util.msg('请输入' + item.key);
						return;
					}
					if (reg.test(!item.value)) {
						this.$util.msg('个性化设置暂不允许使用表情字符！');
						return;
					}
				}
				this.qw()
			},
			qw() {
				let par = {
					sessionId: this.sessionId ? this.sessionId : '',
					templateId: this.templateID,
					question: this.sparkResult,
				}
				this.loadstatus = 1;
				this.api.aichat.qwen(par).then(res => {
					if (res.code === 0) {
						this.sessionId = res.data.sessionId;
						this.answer = res.data.answer;
						console.log(this.answer);
						this.loadstatus = 2
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			copy() {
				this.$util.copy(this.answer)
			},
			reply() {
				this.loadstatus = 0;
				this.answer=''
				// this.qw()
			},
			useIt() {
				uni.$emit('useAI', this.answer);
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 50rpx 30rpx 0;
		height: calc(100vh - 190rpx);
		overflow-y: scroll;
		padding-bottom: 20rpx;
	}

	.box_title {
		width: 690rpx;
		margin: 50rpx auto 0;

		.sort {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			background-color: #000000;
			border-radius: 5rpx;

			text {
				margin-top: 6rpx;
			}
		}

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.form_box {
		width: 690rpx;
		margin: 30rpx auto 0;
		padding-left: 30rpx;
		background-color: white;
		border-radius: 20rpx;

		.form_item {
			width: 660rpx;
			height: 100rpx;
			padding-right: 30rpx;
			position: relative;

			.form_item_left {
				text {
					width: 100%;
				}
			}

			.form_item_right {
				font-size: 28rpx;
				width: 100%;

				.right_icon {
					width: 10rpx;
					height: 20rpx;
				}

				.uni-input {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 300rpx;
					height: 80rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #EB5E00;
				}
			}

			.form_item_right ::v-deep {
				input {
					color: rgba(21, 21, 21, 1) !important;
					font-weight: 500;
				}

				uni-number-box {
					input {
						color: #e4265b !important;
						font-weight: 500;
					}
				}
			}
		}

		.form_item_line::after {
			content: "";
			width: 100%;
			height: 1px;
			background-color: #f4f4f4;
			position: absolute;
			top: 99.9%;
		}
	}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 190rpx;
		background: #FFFFFF;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690rpx;
			height: 110rpx;
			border-radius: 20rpx;
			font-size: 36rpx;
			color: #F9F9F9;
		}
	}

	.box {
		margin-top: 30rpx;

		.box_item {
			.cell-box {
				height: 80rpx;
				border: 2rpx solid #dcdfe6;
				padding: 0 30rpx;
			}
			.textarea-box {
			padding: 30rpx;
			border: 2rpx solid #dcdfe6;
			}
		}

		.selet {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.btn {
				padding: 10rpx 20rpx;
				border-radius: 8rpx;
				color: #fff;
				font-size: 24rpx;
				background-color: #e4265b;
			}
		}
	}

	.loading-box {
		width: 690rpx;
		padding: 50rpx 0;
		border-radius: 20rpx;
		margin: 50% 50%;
		translate: -50% -50%;
	}

	.answer-box {
		width: 690rpx;
		margin: 30rpx auto 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #333333;
		padding: 40rpx 30rpx;

		.tips {
			text-align: right;
			font-size: 24rpx;
			color: #999999;
			margin-top: 38rpx;
		}
	}
</style>